<template>
  <div class="app">
    <!-- 头部 -->
    <heade></heade>
    <!-- 选项卡 -->
    <div class="tabs">
        <ul>
          <li> 
            <router-link to="/goods">商品</router-link>
          </li>
          <li>
            <router-link to="/rating">评价</router-link>
          </li>
          <li>
            <router-link to="/seller">商家</router-link>
          </li>
        </ul>
        <router-view></router-view>
    </div>
  </div>
</template>

<script>

import heade from './views/header.vue';
export default {
  components:{
    heade,
  },
  data(){
    return{
      
      
    };
  },
  methods:{
    
  },
}
</script>

<style lang="less" scoped>
.app{
  height: 100%;
}
.tabs{
  height: 78vh;
  overflow: hidden;
  ul{
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    li{
      height: 40px;
      line-height: 40px;
    }
    li>a:hover{
      color: red;
    }
  }
}
</style>